<template>
  <el-dialog
    v-model="showDialog"
    :title="t('updatePointsDividend')"
    width="500px"
    class="diy-dialog-wrap"
    :destroy-on-close="true"
  >
    <el-form
      :model="formData"
      label-width="120px"
      ref="formRef"
      :rules="formRules"
      class="page-form"
      v-loading="loading"
    >
      <el-form-item :label="t('date')" prop="date">
        {{ formData.date }}
      </el-form-item>

      <el-form-item :label="t('totalTurnover')" prop="total_turnover">
        {{ formData.total_turnover }}
      </el-form-item>

      <el-form-item :label="t('handTotalTurnover')" prop="hand_total_turnover">
        <el-input
          v-model="formData.hand_total_turnover"
          clearable
          :placeholder="t('handTotalTurnoverPlaceholder')"
          class="input-width"
        />
      </el-form-item>

      <el-form-item :label="t('totalContribution')" prop="total_contribution">
        {{ formData.total_contribution }}
      </el-form-item>

      <el-form-item :label="t('dividendRate')" prop="dividend_rate">
        <el-input
          v-model="formData.dividend_rate"
          clearable
          :placeholder="t('dividendRatePlaceholder')"
          class="input-width"
        />
      </el-form-item>
      <el-form-item :label="t('turnoverType')" prop="turnover_type">
        <Dict-tag :value="formData.turnover_type" type="turnover_type" />
      </el-form-item>
      <el-form-item :label="t('status')">
        <Dict-tag :value="formData.status" type="execution_status" />
      </el-form-item>
      <el-form-item :label="t('executeTime')">
        <div v-if="formData.execute_time">{{ formData.execute_time }}</div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="showDialog = false">{{ t("cancel") }}</el-button>
        <el-button type="primary" :loading="loading" @click="confirm(formRef)">{{
          t("confirm")
        }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import { t } from "@/lang";
import type { FormInstance } from "element-plus";
import {
  addPointsDividend,
  editPointsDividend,
  getPointsDividendInfo,
} from "@/app/api/distributor";

let showDialog = ref(false);
const loading = ref(false);

/**
 * 表单数据
 */
const initialFormData = {
  id: "",
  date: "",
  total_turnover: "",
  hand_total_turnover: "",
  total_contribution: "",
  dividend_rate: "",
  turnover_type: "",
  status: "",
  execute_time: "",
};
const formData: Record<string, any> = reactive({ ...initialFormData });

const formRef = ref<FormInstance>();

// 表单验证规则
const formRules = computed(() => {
  return {
    hand_total_turnover: [
      { required: true, message: t("handTotalTurnoverPlaceholder"), trigger: "blur" },
    ],
    dividend_rate: [
      { required: true, message: t("dividendRatePlaceholder"), trigger: "blur" },
    ]
  };
});

const emit = defineEmits(["complete"]);

/**
 * 确认
 * @param formEl
 */
const confirm = async (formEl: FormInstance | undefined) => {
  if (loading.value || !formEl) return;
  let save = formData.id ? editPointsDividend : addPointsDividend;

  await formEl.validate(async (valid) => {
    if (valid) {
      loading.value = true;

      let data = Object.assign({}, formData);
      data.turnover_type = 1; // 改为手动
      save(data)
        .then((res) => {
          loading.value = false;
          showDialog.value = false;
          emit("complete");
        })
        .catch((err) => {
          loading.value = false;
        });
    }
  });
};

// 获取字典数据

const setFormData = async (row: any = null) => {
  Object.assign(formData, initialFormData);
  loading.value = true;
  if (row) {
    const data = await (await getPointsDividendInfo(row.id)).data;
    if (data)
      Object.keys(formData).forEach((key: string) => {
        if (data[key] != undefined) formData[key] = data[key];
      });
  }
  loading.value = false;
};

defineExpose({
  showDialog,
  setFormData,
});
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.diy-dialog-wrap .el-form-item__label {
  height: auto !important;
}
</style>
